<template>
	<view class="grade">
		
		<!-- <view class="circle" v-for="(el, elIndex) in imgList"> -->
		<view class="circle" v-if="imgList.length > 0 ">
			<!-- <image :src="el.imgLine" mode="widthFix" v-if="currentIndex == elIndex"></image> -->
			<view class="circle_dian_box" >
				<view class="circle_left" v-if="currentIndex != 0">
					<text class="circle_left_word" :style="{color:imgList[currentIndex-1].color}">{{imgList[currentIndex-1].name}}</text>
					<image class="imgBox" :src="imgList[currentIndex-1].imgYuan" mode="widthFix"></image>
				</view>
				<view class="circle_center">
					<text class="circle_center_word" :style="{color:imgList[currentIndex].color}">{{imgList[currentIndex].name}}</text>
					<image class="imgBox" :src="imgList[currentIndex].imgYuan" mode="widthFix"></image>
				</view>
				<view class="circle_left circle_right" v-if="currentIndex != (imgList.length-1)">
					<text class="circle_left_word" :style="{color:imgList[currentIndex+1].color}">{{imgList[currentIndex+1].name}}</text>
					<image class="imgBox" :src="imgList[currentIndex+1].imgYuan" mode="widthFix"></image>
				</view>
			</view>
			<image class="line" :src="'/static/my/member_'+((currentIndex+1)>8?8:(currentIndex+1))+'.png'"
				mode="widthFix"></image>
		</view>
		<swiper class="image-container" previous-margin="60rpx" next-margin="60rpx" @change="swiperChange" :current="currentIndex">
			<swiper-item :class="currentIndex == index ? 'swiper-item' : 'swiper-item-side'" v-for="(item, index) in imgList" :key="item.id">
				<view class="image-box" @click="clickImg(item,index)" :class="currentIndex == index ? 'item-img' : 'item-img-side'" :style="dontFirstAnimation ? 'animation: none;' : '' ">
					<image class="image-img" :src="'/static/my/bg_'+((index+1)>8?8:(index+1))+'.png'" lazy-load mode="widthFix"></image>
					<view class="image-mask">
						<view class="mask-left">
							<view class="mask-title">{{item.name}}权益</view>
							<view class="mask-subtitle">{{item.status?'已解锁':'未解锁'}}{{item.name}}权益</view>
							<view class="mask-content">{{item.text}}</view>
						</view>
						<view class="mask-right">
							<image class="imgBox" :class="{'mask_right_on':!item.status}" :src="item.icon"></image>
							<image class="lock" src="/static/my/lock.png" mode="widthFix" v-if="!item.status"></image>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>

	</view>

</template>
<script>
	export default {
		props: {
			imgList: {
				type: Array,
				default () {
					return []
				}
			},
			urlKey: {
				type: String,
				default () {
					return ''
				}
			},
			currentIndex: {
				type: Number,
				default () {
					return 0
				}
			},
		},
		data() {
			return {
				// currentIndex: 3,
				dontFirstAnimation: true,
				colorList: {}
				// imgList:
			}
		},
		created() {
			console.log(this.currentIndex)
			// this.currentIndex = this.listIndex
			// if(this.imgList!=0){
			// 	this.imageUrl = this.imgList[0].imgLine
			// }

		},
		mounted() {
			// console.log('66666++++++'+this.listIndex)
		},
		methods: {
			swiperChange(e) {
				this.dontFirstAnimation = false
				// this.currentIndex = e.detail.current
				this.imageUrl = this.imgList[e.detail.current].imgLine
				this.$emit('selectedFunc',e.detail.current)
				
			},
			clickImg(item,index) {
				// this.$emit('selected', item,index)
			}
		}
	}
</script>
<style scoped>
	.image-container {
		width: 750rpx;
		height: 276rpx;
	}

	.item-img {
		width: 600rpx;
		height: 276rpx;
		/* border-radius: 14rpx; */
		animation: to-big .3s;
	}

	.circle {
		position: relative;
		width: 750rpx;
		height: 120rpx;
		overflow: hidden;
		margin-bottom: -22rpx;
	}

	.circle .line {
		width: 758rpx;
		position: absolute;
		bottom: 0;
	}
	.circle_dian_box{
		position: relative;
		width: 584rpx;
		height: 100rpx;
		margin: 0 auto;
		z-index: 5;
	}
	.circle_left,
	.circle_center {
		position: absolute;
		display: flex;
		flex-direction: column;
		align-items: center;
		font-weight: 400;
		font-size: 20rpx;
		/* z-in */
	}
	.circle_left{
		left: 0;
		bottom: 0;
		opacity: .5;
	}
	.circle_right{
		left: unset;
		right: 0;
		bottom: 0;
	}
	.circle_center {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: 0;
		font-size: 28rpx;
	}

	.circle_left image {
		width: 28rpx;
		height: 28rpx;
	}

	.circle_center image {
		width: 36rpx;
		height: 36rpx;
		/* opacity: 0.5; */
	}


	.swiper-item {
		width: 600rpx;
		height: 276rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.item-img-side {
		width: 600rpx;
		height: 220rpx;
		border-radius: 14rpx;
		animation: to-mini .3s;
	}

	.swiper-item-side {
		width: 600rpx;
		height: 220rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.image-box {
		position: relative;
	}

	.image-mask {
		position: absolute;
		top: 16rpx;
		width: 100%;
		height: calc(100% - 16rpx);
		display: flex;
		flex-direction: row;
		padding: 24rpx 20rpx;
		box-sizing: border-box;
		justify-content: space-between;
	}

	.mask-left .mask-title {
		font-weight: 400;
		font-size: 56rpx;
		line-height: 78rpx;
		color: #FFFFFF;
		margin-bottom: 10rpx;
	}

	.mask-left .mask-subtitle {
		font-size: 26rpx;
		line-height: 26rpx;
		margin-bottom: 40rpx;
		color: #FFFFFF;
	}

	.mask-left .mask-content {
		font-size: 22rpx;
		line-height: 28rpx;
		color: #CACACA;
	}

	.mask-right {
		margin-right: 40rpx;
		width: 164rpx;
		height: 184rpx;
		position: relative;

	}

	.mask_right_on {
		opacity: .5 !important;
	}

	.lock {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 52rpx;
		height: 64rpx;
	}

	.image-img {
		width: 100%;
		height: 276rpx;
	}

	@keyframes to-mini {
		from {
			height: 276rpx;
		}

		to {
			height: 220rpx;
		}
	}

	@keyframes to-big {
		from {
			height: 220rpx;
		}

		to {
			height: 276rpx;
		}
	}
</style>
